<template>
  <div class="btn-common-style">
    <el-button type="warning" @click="click">
      {{ isFullScreen ? '开启全屏' : '关闭全屏' }}
    </el-button>
  </div>
</template>

<script>
import screenFull from 'screenfull'

export default {
  name: 'screenFull',
  data() {
    return {
      // 是否开启全屏
      isFullScreen: false,
    }
  },
  mounted() {
    // 初始化注册screenFull的change事件
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    click() {
      if (!screenFull.isEnabled) {
        this.$message.warning('您的浏览器不支持全屏展示')
        return false
      }
      screenFull.toggle()
    },
    init() {
      // 判断是否支持全屏
      if (screenFull.isEnabled) {
        // 开启监听change事件, 开启全屏
        screenFull.on('change', this.change)
      }
    },
    change() {
      this.isFullScreen = screenFull.isFullscreen
    },
    // 关闭全屏
    destroy() {
      if (screenFull.isEnabled) {
        screenFull.off('change', this.change)
      }
    },
  },
}
</script>
